﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>AAP: Proyecto de computación distribuida</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="content-language" content="es" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<link rel="shortcut icon" href="http://geneura.ugr.es/~jmerelo/asignaturas/AAP/AAP.png" type="image/x-icon" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript">
		//<![CDATA[
			var data1, data2, data3,
				days = 1,  type = 'column', x = 'días';
			google.load("visualization", "1", {packages:["corechart"]});
			google.setOnLoadCallback(function() {$.get('/@api', {request: 'statistics', days: days}, setData, 'json');});
			function drawChart(data) {
				if (type==='column') var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
				else if (type==='line') var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
				else if (type==='area') var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
				else if (type==='pie') var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
				chart.draw(data, {width: 938, height: 400, legend: 'top',
					backgroundColor: 'seashell', chartArea: {left:50,top:20,width:"93%",height:"75%"},
					hAxis: {title: x, titleTextStyle: {color: 'red'}}}
				);
			}
			function setData(json) {
				data1 = new google.visualization.DataTable();
				data1.addColumn('string', 'Día');
				data1.addColumn('number', 'Dígitos calculados');
				data1.addRows(days);
				for (var i=0; i<days; i++) {
					var count = 0;
					for (var j=0; j<json.ips.length; j++) 
						count += parseInt(json.values[i].value[json.ips[j]]);
					data1.setValue(i, 0, json.values[i].day);
					data1.setValue(i, 1, count);
				}
				data2 = new google.visualization.DataTable();
				data2.addColumn('string', 'Día');
				for (var j=0; j<json.ips.length; j++)
					data2.addColumn('number', json.ips[j]);
				data2.addRows(days);
				for (var i=0; i<days; i++) {
					data2.setValue(i, 0, json.values[i].day);
					for (var j=0; j<json.ips.length; j++)
						data2.setValue(i, j+1, parseInt(json.values[i].value[json.ips[j]]));
				}
				data3 = new google.visualization.DataTable();
				data3.addColumn('string', 'IP');
				data3.addColumn('number', 'Dígitos calculados en ' + days + ' días');
				data3.addRows(json.ips.length);
				for (var i=0; i<json.ips.length; i++) {
					var count = 0;
					data3.setValue(i, 0, json.ips[i]);
					for (var j=0; j<days; j++)
						count += parseInt(json.values[j].value[json.ips[i]]);
					data3.setValue(i, 1, count);
				}
				if (x==='días') drawChart(data1);
				else if (x==='días + IP') drawChart(data2);
				else if (x==='IP') drawChart(data3);
			}
			$(document).ready(function()
			{
				$(".cambiar").click(function(){
					days = parseInt($("#days").val());
					type = $("#type").val();
					x = $("#x").val();
					$.get('/@api', {request: 'statistics', days: days}, setData, 'json');
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<div id="pagina">
			<h1>AAP: Proyecto de computación distribuida</h1>
			<h2>Autor: Iñaki Úcar <a href="/" style="float:right">Volver -></a></h2>
			<div class="estante">
				<div class="columna centro">
					<h2 style="float:left;">Estadísticas</h2>
					<table id="controles">
						<tr>
							<td><span>Días: </span></td>
							<td><span>Tipo: </span></td>
							<td><span>Eje x: </span></td>
						</tr>
						<tr>
							<td><select id="days">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
								<option>6</option>
								<option>7</option>
								<option>8</option>
								<option>9</option>
								<option>10</option>
								<option>11</option>
								<option>12</option>
								<option>13</option>
								<option>14</option>
								<option>15</option>
							</select></td>
							<td><select id="type">
								<option>column</option>
								<option>line</option>
								<option>area</option>
								<option>pie</option>
							</select></td>
							<td><select id="x">
								<option>días</option>
								<option>días + IP</option>
								<option>IP</option>
							</select></td>
							<td><input type="button" class="cambiar" value="Cambiar" /></td>
						</tr>
					</table>	
					<div id="chart_div"></div>
				</div>
			</div>
		</div>
	</body>
</html>
